<template>
  <maincontainer>
    <mycard>
      <n-form
        ref="formRef"
        :label-width="80"
        label-placement="left"
        :model="formValue"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="地区名称:" path="search">
              <n-input v-model:value="formValue.search" placeholder="输入地区名称"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="地区层级:" path="level">
              <n-select v-model:value="formValue.level" :options='leveloptions' placeholder="输入地区层级"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="首字母:" path="firstword">
              <n-input v-model:value="formValue.firstword" placeholder="输入首字母"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-button @click="handleSearch">查询</n-button>
            <n-button @click="handleResetForm">重置</n-button>
            <n-button @click="handleCreate">新建</n-button>
          </n-gi>
        </n-grid>
      </n-form>
    </mycard>
    <mycard class="flex-1 h-full">
      <flextable :column="column" :tabledata="tableData" :loading='loading'></flextable>
    </mycard>
    <mycard class="w-full h-8 juzhong1">
      <fenye :total="total" @change="gettabledatafunc" ref="fenyeref"  class="juzhong1"></fenye>
    </mycard>
    <Edit ref="editref" @close='refreshdelete'/>
  </maincontainer>
</template>

<script setup name="Areamanager" lang="ts">
import {useRoute,} from 'vue-router'
import Edit from "./modal.vue"
import {inject, ref} from "vue"
import { useListIndex } from '../../../hooks/useEdit'
import {useColumns} from "../../../hooks/useColumns";
const route = useRoute()
const {
  formRef, fenyeref, editref, formValue, tableData, total, handleSearch,
  handleResetForm, handleView, handleCreate,refreshdelete,http,message,loading,
} = useListIndex()

// 点击删除
let delDialog:undefined | Function = inject("delDialog")
const handleDelete = (data: any) => {
  delDialog && delDialog(refreshdelete,http.areadelete,data.id,data.name)
}
// 点击编辑
const handleEdit = (data:any)=>{
  http.areaget({},data.id,loading).then((res:any)=>{
    if(res.data.code===0){
      const data = {...res.data.data}
      data.status = data.status ? "1" :"2"
      editref.value.init("edit",data)
    }else{
      message.error(res.data.error || "获取详细信息失败")
    }
  }).catch(err=>{
    message.error(err)
  })
}
const {index, createdTime, changeTime,desc, view, edit, del} = useColumns(handleView,handleEdit,handleDelete)
const column = ref([
  index,
  {title: "名称", key: "name", show: true},
  {title: "所属上级", key: "parent", show: true,render: (rowData:any)=>{
      return rowData["parent"]?rowData["parent"].name:""
    }},desc,
  createdTime,changeTime,view, edit, del
])

// 向后台获取数据
const gettabledatafunc = () => {
  const data:any = {
    page:fenyeref.value.page,
    pageSize:fenyeref.value.pageSize,
    ...formValue.value,
  }
  http.arealist(data,loading).then((res:any)=>{
    if(res.data.code===0){
      tableData.value = res.data.items
      total.value = res.data.total
    }
  }).catch(err =>{
    message.error(err || "查询失败")
  })
}

// 备选层级
const leveloptions=ref([
  {label:"国家",value:"1",},
  {label:"省",value:"2",},
  {label:"市",value:"3",},
  {label:"区/县",value:"4",},
  {label:"街道/乡镇",value:"5",},
])
const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {
  fenyeref.value && fenyeref.value.changeoption({page:1})
}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>


<style scoped>
</style>
